<template>
	<view class="content">
		<view class="">
			<c-navBar title="课时数据"></c-navBar>
			<heardSeach :localData1="localData1" :localData2="localData2" :selectShow="true" :timeShow="false"
				@emitParmas="seach"></heardSeach>
		</view>





		<view class="list">
			<c-list class="ranking-list" v-model:loading="loading" v-model:error="error" error-text="请求失败，点击重新加载"
				@load="Loads">
				<view class="ranking-item" v-for="(item,index) in list" :key="index">

					<view class="item-row">
						<view class="item-col">
							<!-- <text class="text-color-6  ">姓名：</text> -->
							<text class="item-text2 text-color-3">{{item.username}}</text>
							<text class="item-text2 text-color-3">(剩余课时{{item.module_minute}})</text>
						</view>
						<view class="item-col">
							<text class="text-color-2">已消耗课时：</text>
							<text class="item-text2 text-color-2">{{item.use_hour}} 小时</text>
						</view>
					</view>
					<view class="item-row item-row-1">


						<view class="item-col">
							<text class="text-color-6  ">购买总课时：</text>
							<text class="item-text2 text-color-6">{{item.all_hour}} 小时</text>
						</view>
						<!-- <view class="item-col"> 
							<text class="text-color-2">赠送课时：</text>
							<text class="item-text2 "> 小时</text>
						</view> -->
					</view>

					<view class="button-box">
						<!-- <van-button type="primary" size="small" style="margin-right: 20rpx;">操作</van-button> -->
						<van-button type="primary" size="small" @click="pathDetail(item.user_id)">详情</van-button>
					</view>
				</view>
			</c-list>
		</view>




		<van-empty description="暂无数据" v-if="list.length===0" />



	</view>
</template>

<script setup>
	import {
		getUserLogLists,
		getAllSchool
	} from "@/apis/dataList.js"

	import heardSeach from "../../components/heardSeach/index.vue"

	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"
	const pramas = reactive({
		school_id: '',
		grade: '',
		search_data: '',
	})
	const listLoading = ref(false)
	const showPopover = ref(false);
	const list = ref([]);
	const error = ref(false);
	const loading = ref(false);
	const localData1 = ref([])
	const localData2 = ref([])
	onLoad(() => {
		init()
		getThreeList()

	})
	// const emitParmas=(data)=>{ 
	const seach = (data) => {
		console.log(data)
		pramas.school_id = data.school
		pramas.grade = data.grade
		pramas.search_data = data.value
		init()

	}
	const getThreeList = async () => {
		let {
			data
		} = await getAllSchool({})
		if (data && Array.isArray(data)) { 
			data.map(el => {
				el.value = el.id
				el.text = el.school_name
			})
		}
		localData1.value = data
		// console.log(data)
	}
	const pathDetail = (id) => {
		uni.navigateTo({
			url: `/pages/dataList/lessonDataDetail?id=${id}`
		})
	}
	const init = async () => {
		try {
			if (listLoading.value) {
				return
			}
			listLoading.value = true;

			let {
				data
			} = await getUserLogLists(pramas)

			if (data) {
				// total.value = data.total

				list.value = data
			}
			listLoading.value = false;

			console.log(list.value)
		} catch (err) {
			listLoading.value = false;
			console.log(err)
		}
	}


	const Loads = () => {
		loading.value = false;
		error.value = false;

	};
</script>

<style lang="scss" scoped>
	.ranking-list {
		width: 100vw;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: 100vh;
	}

	text {
		font-size: 26rpx;
	}

	.list {
		flex: 1;
		width: 100%;
		overflow: hidden;
	}

	.ranking-item {
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		width: 670rpx;
		margin-top: 32rpx;
		border: 1rpx solid rgba(236, 236, 236, 1);
		border-radius: 16rpx;
		padding: 20rpx;

	}

	.item-row {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.item-row-1 {
		margin-bottom: 0rpx;
	}

	.item-col {
		width: 50%;
	}

	.button-box {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
</style>